<!--
  ~ Copyright 2010 Pierre Heinzerling, Uwe Janner, Patrick Wright
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~        http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html>
<head>
    <link type="text/css" rel="stylesheet" href="css/table_border.css">
    <link type="text/css" rel="stylesheet" href="css/overview_page.css">
    <script type="text/javascript" src="js/util.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
    <script type="text/javascript">
        var theme_id = null;
        const MAX_DISPLAY_LEN = 75;
        function removeAllRowsFromTable(tableId) {
            $('#' + tableId).children().remove();
        }
        function shorten(text) {
        	if (text.length > MAX_DISPLAY_LEN) {
        		text = text.substring(0, MAX_DISPLAY_LEN) + "...";
        	}
        	return text;
        }

        function dumpObjectProperties(obj) {
            writeLog("properties for unknown object:")
            for (property in obj) {
                writeLog("  " + property);
            }
        }

        function addLink(email, link, comments) {
            var owner = "You added this link.";
            var isLinkOwner = true;
            if (link.addedByEmail != email) {
                owner = "Added by " + link.addedByEmail;
                isLinkOwner = false;
            }

            var content = '<div class="savedLinkCtn">';
            content += '<a class="savedLink" href="' + link.uriString + '" title="' + link.title + '">' + shorten(link.title) + '</a>';
            content += '<a href="' + link.uriString + '">';
            content += '<img src="http://www.iwebtool2.com/img/?domain=' + escape(link.uriString) + '" />';
            content += '</a>';
            content += '<br />';

            content += "&nbsp;&nbsp;" + owner;
            if (comments) {
                var i;
                content += "<ul>";
                var addLine;
                var newLine;
                for (i = 0; i < comments.length; i++) {
                	addLine = false
                	newLine = "";
                    var cmt = comments[i];
                    var isCommentAuthor = false;
                    if (cmt.userEmail == email) {
                        isCommentAuthor = true;
                    }

                    newLine = "<li>";
                    newLine += "<b>";
                    newLine += isCommentAuthor ? "You " : cmt.userEmail + " ";
                    newLine += "</b>";
                    if (!cmt.isGood) {
                        if (isLinkOwner) {
                        	newLine += "doesn't like it.<br />";
                        } else {
                        	newLine += "don't like it.<br />"
                        }
                        addLine = true;
                    }
                    if (cmt.note && cmt.note.length > 0) {
                    	newLine += "<i>'" + cmt.note + "'</i> ";
                    	addLine = true
                    }
                    newLine += "</li>";
                    if(addLine) content += newLine;
                }
                content += "</ul>";
            }
            content += "<div class=\"clearer\">" + link.addedOn + "</div>";
            content += "</div>";
            $('#links_table').append(content);
        }
        function refreshPage() {
            chrome.tabs.getSelected(null, function(tab) {
                current_url = tab.url;

                // send message to bg, who will msg back with fresh link content
                var msg = {refreshOverview: "refresh_overview", themeId: theme_id};
                dumpObjectProperties(msg);
                chrome.extension.sendRequest(msg, function(response) { });
            });
        }
        chrome.extension.onRequest.addListener(
                function(request, sender, sendResponse) {
                    if (request.type == "links") {
                        if(theme_id == null || theme_id == theme.key.id) {
	                        var theme = JSON.parse(request.theme);
	                        removeAllRowsFromTable("links_table");
	                        theme_id = theme.key.id;
	                        populateTable(JSON.parse(request.theme), JSON.parse(request.content));
                        }
                    } else if (request.type == "clear") {
                        removeAllRowsFromTable("links_table");
                    } else if (request.type == "links_refresh") {
                        if(theme_id == theme.key.id) {
	                        removeAllRowsFromTable("links_table");
	                        populateTable(JSON.parse(request.theme), JSON.parse(request.content));
                        }
                    }
                    sendResponse({}); // snub them.
                }
                );
        function populateTable(theme, content) {
            var email = bg().loginState.email;
            theme_id = theme.key.id;

            elem("theme_info").innerHTML = theme.name;
            var links = content;
            for (var i = 0; i < links.length; i++) {
                var linkAndComments = links[i];
                addLink(email, linkAndComments.link, linkAndComments.comments);
            }
        }
    </script>
</head>
<body>
<h1 id="theme_info"></h1>
<a href="#" onclick="refreshPage()" class="small">Refresh</a>

<div id="links_table">
</div>
</body>
</html>